<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<title>地图显示</title>
		<style>
			html,
			body,
			.mui-content {
				height: 100%;
			}
			
			#container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商家位置</h1>
		</header>
		<div class="mui-content">
			<div id="container"></div>
		</div>

	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.5&key=58c536d98f8fa9b22bfeac02bf965350"></script>
<script>
	var marker, map, infoWindow;
	var inputComName = localStorage.getItem("danweiming");
	var inputAddr = localStorage.getItem("dizhi");
	console.log(inputComName,inputAddr)
	window.onload = function() {

		var map = new AMap.Map('container', {
			resizeEnable: true, //是否监控地图容器尺寸变化
			zoom: 8, //初始化地图层级
			center: [108.366247, 22.817232], // 默认南宁市
		});

		// 创建地址解析器
		AMap.plugin('AMap.Geocoder', function() {
			geocoder = new AMap.Geocoder({
				// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
				city: '南宁'
			});
		});

		if(inputComName != "" && inputAddr != "") {
			// 调用查询(确定地址存在再进行调用)
			findCity(inputComName, inputAddr);
		} else {
			alert("地址不正确，未检索到");
		}

		// 
		function findCity(comName, addr) {
			geocoder.getLocation(addr, function(status, result) {
				if(status === 'complete' && result.geocodes.length) {
					var lnglat = result.geocodes[0].location
					if(!marker) {
						marker = new AMap.Marker();
						map.add(marker);
					}
					marker.setPosition(lnglat);
					map.setFitView(marker);
					// 增加点击事件    
					addDeckEvent(marker, lnglat, comName, addr);
					// 打开信息窗体
					openInfo(lnglat, comName, addr);
				} else {
					//地理信息未解析成功调用
					console.log(JSON.stringify(result));
					alert('地址不正确，未检索到');
				}
			});
		}

		//在指定位置打开信息窗体
		function openInfo(lnglatXY, comName, addr) {
			var infoWindowTitle = "<div class='info-top'>" + comName + "</div>";
			var infoWindowHtml = [];
			infoWindowHtml.push(infoWindowTitle); //color: #4178e2;
			infoWindowHtml.push("<span style='font-weight: bold;'>地址：</span>" + addr + "</br>");
			infoWindowHtml.push("<div style='text-align: center;'>");
			infoWindowHtml.push("</div>");
			infoWindow = new AMap.InfoWindow({
				content: infoWindowHtml.join(""), //传入 dom 对象，或者 html 字符串
				offset: new AMap.Pixel(2, -22)
			});
			infoWindow.open(map, lnglatXY);
		}

		// 为覆盖物添加点击事件
		function addDeckEvent(marker, lnglat, comName, addr) {
			marker.on("click", function(e) {
				openInfo(lnglat, comName, addr);
			});
		}
	}
</script>